<template>
  <div 
    :class="$style.container" 
    class="a_header">
    <div :class="$style.wrapper">
      <el-row>
        <el-col
          :span="4" 
          style="padding-right: 24px;height:60px;">
          <nuxt-link to="/">
            <span :class="$style.logo"/>
            <span :class="$style.text">TV</span>  
          </nuxt-link> 
        </el-col>
        <el-col :span="11">
          <nav-menu/>
        </el-col>
        <el-col :span="9">
          <right/>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import NavMenu from './navMenu'
import Right from './right'
export default {
  components: {
    NavMenu,
    Right
  },
  data() {
    return {}
  }
}
</script> 
<style lang="scss" module>
.container {
  margin: 10px 0 0px;
  line-height: 60px;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  box-shadow: 1px 0 5px rgba(0, 0, 0, 0.06);
  text-align: right;
  .wrapper {
    margin: 0 auto;
    max-width: 1200px;
  }
  .text {
    font-size: 10px;
    color: #e36049;
  }
  .logo {
    margin-top: 10px;
    display: inline-block;
    height: 40px;
    width: 40px;
    background: url('../../assets/imgs/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
  }
}
</style>
<style scoped>
.a_header >>> .is-active {
  border-bottom: 2px solid #e36049;
  color: #303133;
}
</style>
